<template>
  <view class="top">
    <view class="package flex-start">
      <image :src="userStore.friendUserInfo.avatar?userStore.friendUserInfo.avatar:iconUser" mode=""></image>
      <view class="direction-start">
        <text>{{userStore.friendUserInfo.nickname?userStore.friendUserInfo.nickname:'微信用户'}}</text>
        <text>{{userStore.friendUserInfo.realname?userStore.friendUserInfo.realname:'真实姓名'}}</text>
        <text @click="telCall(userStore.friendUserInfo.mobile)"
          v-if="userStore.friendUserInfo.mobile">{{userStore.friendUserInfo.mobile}}</text>
        <text v-else>手机号码</text>
      </view>
    </view>
    <view class="binding" v-if="userID==0"><text @click="openBound()">绑定车友微信</text></view>
  </view>
  <!-- 已绑定弹框 -->
  <uni-popup ref="Bound" type="center" :is-mask-click="false">
    <view class="package column" style="width: 650rpx;padding: 30rpx 20rpx 40rpx;">
      <image :src="imge" mode="" style="width:600rpx;height:600rpx"></image>
      <view>本微信已绑定车友档案</view>
      <view class="center" style="margin: 30rpx 0px;">
        <image :src="mineUrser.driver_avatar" mode="" style="width:56rpx;height:56rpx;border-radius: 5px;"></image>
        <text style="color: #0C8AFF;">{{mineUrser.driver_name}}</text>
      </view>
      <view class="center" style="width: 100%;justify-content: space-around;">
        <text class="del" @click="closeBound()">取消</text>
        <text class="sub"
          @click="redirectTo('Sale/archives/editFriend?id='+mineUrser.archives_id+'&userID='+driver_id)">查看原文档</text>
      </view>
    </view>
  </uni-popup>
  <!-- 邀请图片 -->
  <uni-popup ref="Archives" type="center">
    <view class="package column" style="width: 650rpx;padding: 30rpx 20rpx 40rpx;">
      <image :src="imge" mode="" style="width:600rpx;height:600rpx"></image>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import iconUser from '@/static/saleIcon/Icon/mine.png';
  import { onLoad, onUnload } from '@dcloudio/uni-app';
  import { successToast, showLoading } from '@/utils/prompt';
  import { telCall } from '@/utils/copyText';
  import { redirectTo } from '@/utils/navigator';
  import { subject, subscribe, unsubscribe, toPublish } from '@mqtt';
  import type { Subscription } from 'rxjs';
  import { inviteArchives } from '@/gql/user';
  import { ref } from 'vue';
  import { useUserStore } from '@/stores/user';
  import { getDriverID } from '@/stores/driverID';
  const plug_id = getDriverID();
  const userStore = useUserStore();
  /**
    * 车友信息
    * @param {Null} Bound 已绑定弹框
    * @param {Null} Archives 邀请图片弹框
    * @param {String} archives_id  司机列表ID
    * @param {String} userID  司机ID
    * @param {String} imge  邀请图片
    * @param {Null} Subscription rxjs的一个一次性资源
    * @param {Object} mineUrser 用户信息
    * @param {Number} driver_id 司机绑定ID
    * @param {Boolean} monitor  是否取消订阅
    * @param {Boolean} repeat  放重复点击
    * @return
    */
  const Bound = ref(null);
  const Archives = ref(null)
  const archives_id = ref('');
  const userID = ref('')
  const imge = ref('');

  let subscription : Subscription = null;
  const mineUrser = ref({})
  const driver_id = ref()
  const monitor = ref(false)
  const repeat = ref(true); //放重复点击
  onLoad((pearm) => {
    archives_id.value = pearm.id;
    userID.value = pearm.userID
    // information(pearm.userID)
    init();
  });
  function init() {
    const payload = {
      query: inviteArchives,
      variables: { plug_id, archives_id: Number(archives_id.value) },
    };
    toPublish('ql/plug/inviteArchives', payload, (obj : any) => {
      const { data } = obj;
      imge.value = data.inviteArchives.image;
    });
  }
  function information(num : any) {
    userID.value = num
    if (num && num != 0) {
      userStore.friendUser(userID.value)
    } else {
      monitor.value = true
      ComeBackFilling()
    }
  }
  /**
   * 接收信息
   */
  function viewDdata(num) {
    const ref = num;
    if (ref.archives == archives_id.value) {
      driver_id.value = ref.driver_id
      delFilling()
      BindingStatus(ref.driver_id)
    }
  }
  /**
   * 绑定状态
   */
  function BindingStatus(id) {
    Archives.value.close()
    showLoading();
    if (!repeat.value) {
      return;
    }
    repeat.value = false;
    const payload = {
      driver_id: id,
      archives_id: Number(archives_id.value),
      plug_id
    };
    toPublish('plug/bindArchives', payload, (obj : any) => {
      const { code, msg, data } = obj;
      if (code == 1) {
        repeat.value = true
        successToast(msg)
        userID.value = id
        userStore.friendUser(userID.value)
      } else {
        repeat.value = true
        mineUrser.value = data
        Bound.value.open();
      }
    });
  }
  /**
   * 订阅绑定返回信息
   */
  function ComeBackFilling() {
    const pearm = 'formal/v1/newFile/Create/client/' + archives_id.value;
    toSubscribe();
    subscribe(pearm);
  }
  function toSubscribe() {
    if (subscription === null) {
      subscription = subject.subscribe(viewDdata);
    }
  }
  /**
   * 取消订阅加注机信息
   */
  function delFilling() {
    monitor.value = false
    toUnsubscribe();
    const pearm = 'formal/v1/newFile/Create/client/' + archives_id.value;
    unsubscribe(pearm);
  }
  function toUnsubscribe() {
    subscription.unsubscribe();
    subscription = null;
  }

  /**
   * 绑定弹框
   */
  function openBound() {
    Archives.value.open();
  }
  /**
   * 绑定弹框
   */
  function closeBound() {
    Bound.value.close();
  }
  onUnload(() => {
    if (subscription !== null) {
      subscription.unsubscribe();
    }
    if (monitor.value) {
      delFilling();
    }
  });
  defineExpose({ information });
</script>

<style scoped lang="less">
  image {
    width: 103rpx;
    height: 103rpx;
    border-radius: 5px;
    margin-right: 15rpx;
  }

  .top {
    width: 100%;
    position: relative;
  }

  .binding {
    width: 96%;
    height: 85.6px;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 0px;
    left: 2%;
    border-radius: 5px;
    text-align: center;
    line-height: 85.6px;

    text {
      padding: 3rpx 10rpx 8rpx;
      box-sizing: border-box;
      background: #ffb555;
      border-radius: 5px;
      text-align: center;
      color: #ffffff;
      font-size: 28rpx;
    }
  }

  .del {
    width: 227rpx;
    height: 68rpx;
    border: 2rpx solid #55adff;
    border-radius: 34rpx;
    text-align: center;
    line-height: 68rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #55adff;
  }

  .sub {
    width: 227rpx;
    height: 68rpx;
    background: #55adff;
    border-radius: 34rpx;
    text-align: center;
    line-height: 68rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #ffffff;
  }
</style>